<template>

    <el-text>本样例演示：渲染数据钻取模板</el-text>
  <hr>
    <div id="chartdatadrillingcontainer" style="width: 100%; height: 1080px"></div>


</template>
<script setup lang="ts">
//挂载时候，构建bi展现器实例
import {onMounted} from 'vue';
import config from '@/views/chart/datadrilling/config.json';
import dataconfig from '@/views/chart/datadrilling/data.config.json';
import _onUpdateDatasetList from '@/views/chart/datadrilling/onUpdateDatasetList_商品区域销售.json';
import _onUpdateData from '@/views/chart/datadrilling/onUpdateData_商品区域销售_商品季度销售.json';
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js"
let option = {};
option.reportConfig = config;
option.reportData = [];
option.paramsConfig = [];
//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  console.log('111111111')
  return new Promise((resolve, reject) => {
    resolve(_onUpdateDatasetList)
  })
}
option.onUpdateDatasetList = onUpdateDatasetList
function onUpdateData(datasets, params) {
  console.log('2222222')
  return new Promise((resolve, reject) => {
    // resolve的数据格式
    resolve(queryonUpdateDataFrom(datasets, params, _onUpdateData));
  })
}
option.onUpdateData = onUpdateData;

//导入BI报表对应的完整的数据集
let reportInstance = null;
onMounted(() => {
  try {
    console.log('3333')
    document.getElementById("chartdatadrillingcontainer").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。

    reportInstance = new XZDashboard("#chartdatadrillingcontainer", option);
    reportInstance.updateData(dataconfig);//这里传入的就是  chartDesigner模板需要的数据集，不一定需要记录
    //reportInstance.updateData([]);//这里传入的就是  chartDesigner模板需要的数据集，不一定需要记录

    reportInstance.initView();

  } catch (error) {
    console.log("4.........ChatDatadrilling.vue....onMounted", error);
  }
});
</script>

<style scoped>

</style>
